<template>
  <div class="bigbox">
    <div class="top">
      <el-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="6" style="display: flex">
            <el-form-item label="时间间隔" style="margin-right: 20px">
              <el-radio-group
                style="min-width: 200px"
                size="small"
                v-model="form.dateType"
              >
                <el-radio-button label="1">日</el-radio-button>
                <el-radio-button label="2">月</el-radio-button>
                <el-radio-button label="3">年</el-radio-button>
                <el-radio-button label="4">自定义</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                size="small"
                v-show="form.dateType !== '4'"
                v-model="form.dateTime"
                :type="
                  form.dateType === '1'
                    ? 'date'
                    : form.dateType === '2'
                    ? 'month'
                    : 'year'
                "
                placeholder="选择日期"
                :format="
                  form.dateType === '1'
                    ? 'yyyy-MM-dd'
                    : form.dateType === '2'
                    ? 'yyyy-MM'
                    : 'yyyy'
                "
                :value-format="
                  form.dateType === '1'
                    ? 'yyyy-MM-dd'
                    : form.dateType === '2'
                    ? 'yyyy-MM'
                    : 'yyyy'
                "
              >
              </el-date-picker>
              <el-date-picker
                v-show="form.dateType === '4'"
                v-model="form.formTime"
                type="daterange"
                style="width: 100%"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="18" style="text-align: right">
            <el-form-item>
              <Twobtn @chaxun="init" @chongzhi="reset"></Twobtn>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <TopTile @command="command" @daochu="daochu" @shuaxin="getList"></TopTile>
      <div class="table-line">
        <div class="table">
          <nt-table
            v-loading="loading"
            height="100%"
            :issize="issize"
            :tableData="List"
            :tableConfig="tableConfig"
          >
          </nt-table>
        </div>
        <div class="pie">
          <nt-echart :loading="loading" :options="pieOptions"></nt-echart>
        </div>
      </div>
      <div class="bar">
        <nt-echart :loading="loading" :options="lineOptions"></nt-echart>
      </div>
    </div>
  </div>
</template>

<script>
import ntEchart from '@/components/nt-echart.vue'
import ntTable from '@/components/nt-table'
import dayjs from 'dayjs'
import TopTile from '@/components/TopTitle/index.vue'
import { exportexcel } from '@/utils/excel'
import {
  getListApi,
  getLineApi
} from '../../../../api/Intelligence-maintenance/Auxiliary-analysis/Industry-category'
export default {
  components: { ntEchart, ntTable, TopTile },
  name: 'IndustryCategory',
  data() {
    return {
      form: {
        dateTime: dayjs().format('YYYY-MM-DD'),
        industryLargeCategory: '',
        dateType: '1',
        formTime: [
          dayjs().startOf('month').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        ]
      },
      issize: 'middle',
      loading: false,
      lineList: [],
      tableConfig: [
        {
          label: '行业分类',
          prop: 'typeName',
          sortable: true,
          width: '200px'
        },
        {
          label: '平均负荷(kW)',
          prop: 'avgLoad',
          align: 'right'
        },
        {
          label: '最大负荷(kW)',
          prop: 'maxLoad',
          align: 'right'
        },
        {
          label: '最大负荷发生时间',
          prop: 'maxLoadTime',
          align: 'center',
          width: '200px'
        },
        {
          label: '平均负荷率(%)',
          prop: 'avgLoadRate',
          align: 'right',
          sortable: true
        }
      ],
      checkItem: {},
      List: [],
      HYLB: [],
      HYFL: []
    }
  },
  computed: {
    pieOptions() {
      const data = this.List.map((i) => {
        return {
          name: i.typeName,
          value: i.avgLoadRate
        }
      })
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          width: '80%',
          //   // data: ['尖', '峰', '平', '谷'],
          //   formatter: function (name) {
          //     return name.split(':')[0] || name
          //   },
          top: 'bottom'
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '45%'],
            top: '-80px',
            labelLine: {
              length: 30
            },
            data: this.List.length > 0 ? data : []
          }
        ]
      }
    },
    lineOptions() {
      const series =
        this.lineList.length > 0
          ? this.lineList.map((item) => {
              return {
                name: item.name,
                type: 'line',
                stack: 'Total',
                smooth: true,
                markPoint: {
                  data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' }
                  ]
                },
                data: item.datalist.map((i) => {
                  return [i.timeReading, i.valueReading]
                })
              }
            })
          : []
      return {
        title: {
          top: 30,
          text: '用户负荷曲线'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: 40,
          type: 'scroll',
          width: '80%'
        },
        grid: {
          top: 100,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        series: series
      }
    }
  },
  watch: {
    // 'form.industryLargeCategory': {
    //   handler (newVal, oldVal) {
    //     this.getHYFL(newVal)
    //   },
    //   immediate: true,
    //   deep: true
    // },
    'form.dateType': {
      handler(newVal, oldVal) {
        if (newVal !== '4') {
          this.form.dateTime = dayjs().format(
            newVal === '1' ? 'YYYY-MM-DD' : newVal === '2' ? 'YYYY-MM' : 'YYYY'
          )
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    reset() {
      this.form.dateType = '1'
    },
    async getList() {
      this.loading = true
      const res =
        this.form.dateType !== '4'
          ? await getListApi({
              dateType: this.form.dateType,
              dateTime: this.form.dateTime
            })
          : await getListApi({
              dateType: this.form.dateType,
              fromDate: this.form.formTime[0],
              toDate: this.form.formTime[1]
            })
      this.List = res.data.list
      this.loading = false
    },
    async getLine() {
      this.loading = true
      const res =
        this.form.dateType !== '4'
          ? await getLineApi({
              dateType: this.form.dateType,
              dateTime: this.form.dateTime
            })
          : await getLineApi({
              dateType: this.form.dateType,
              fromDate: this.form.formTime[0],
              toDate: this.form.formTime[1]
            })
      this.lineList = res.data.list
      this.loading = false
    },
    init() {
      Promise.all([this.getList(), this.getLine()])
    },
    daochu() {
      this.form.dateType !== '4'
        ? exportexcel(
            '/pio-microservice-biz/pio/load/analysis/industry/large/category/exportExcel',
            {
              dateType: this.form.dateType,
              dateTime: this.form.dateTime
            },
            '行业类别负荷分析'
          )
        : exportexcel(
            '/pio-microservice-biz/pio/load/analysis/industry/large/category/exportExcel',
            {
              dateType: this.form.dateType,
              fromDate: this.form.formTime[0],
              toDate: this.form.formTime[1]
            },
            '行业类别负荷分析'
          )
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
  .top {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    height: 80px !important;
    width: 100% !important;
    margin-bottom: 10px;
    // transition-property: all;
    // transition-duration: 0.2s;
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
    width: 100%;
    .table-line {
      display: flex;
      justify-content: space-between;
      height: 50%;
      .table {
        width: 60%;
      }
      .pie {
        flex: 1;
      }
    }
    .bar {
      flex: 1;
      width: 100%;
    }
  }
}
</style>
